<template>
  <div class="to-be-shipped">
    <div class="btn">
      <el-button @click="changeDate"
        :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">变更交期</el-button>
      <el-button @click="changeNum"
        :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">变更数量</el-button>
      <el-button @click="cancel"
        :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">取消</el-button>
    </div>
    <!-- <customTable/> -->
    <!-- 表格 -->
    <el-table :data="tableData" ref="multipleTable" style="width: 100%" :height="450"
      :header-cell-style="{ background: '#eee', color: '#000' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="deliveryDate" label="交货期" width="150">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="150">
        <template slot-scope="scope">
          <div>
            <div
              style="width:8px;height:8px;background:#FFA900;margin-right:5px;border-radius: 50%;display:inline-block;">
            </div>{{ scope.row.status }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="model" label="型号" width="150"> </el-table-column>
      <el-table-column prop="brand" label="品牌" width="150"> </el-table-column>
      <el-table-column prop="number" label="数量" width="150"> </el-table-column>
      <el-table-column prop="batch" label="批次" width="150"> </el-table-column>
      <el-table-column prop="package" label="封装" width="150"> </el-table-column>
      <el-table-column prop="currecy" label="币种" width="150"> </el-table-column>
      <el-table-column prop="price" label="单价" width="150">
        <template slot-scope="scope">
          <div style="color:#32B457;">{{ scope.row.price }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="订单金额" width="150">
        <template slot-scope="scope">
          <div style="color:#FF7600;">{{ scope.row.money }}</div>
        </template>
      </el-table-column>
      ><el-table-column prop="address" label="交货地" width="150">
      </el-table-column>
      ><el-table-column prop="MPQ" label="MPQ" width="150"> </el-table-column><el-table-column prop="packing" label="包装"
        width="150"> </el-table-column>
      <el-table-column prop="order" label="订单项" width="170">
      </el-table-column>
      <el-table-column prop="desc" label="备注" width="150"> </el-table-column>
    </el-table>
    <el-pagination class="pagination" layout="total,sizes,prev, pager, next,jumper" :total="50">
    </el-pagination>
    <!-- 变更交期 -->
    <dateDrawer :drawer="drawer" @close="closeDrawer" />
    <!-- 变更数量 -->
    <numberDrawer :numDrawer="numDrawer" @close="closeNumDrawer" />
    <!-- 取消 -->
    <el-dialog title="取消" :visible.sync="dialogVisibleCancel" width="600px" top="31vh" :before-close="handleClose">
      <el-input type="textarea" placeholder="请输入取消原因" :rows="6" maxlength="120" show-word-limit></el-input>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="dialogVisibleCancel = false">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import customTable from "./customTable.vue";
import dateDrawer from "./dateDrawer.vue";
import numberDrawer from "./numberDrawer.vue";
export default {
  name: "toBeShipped",
  data() {
    return {
      status: false,
      gutter: 5,
      span: 12,
      drawer: false,
      numDrawer: false,
      dialogVisibleCancel: false,
      tableData: [
        {
          deliveryDate: '2023-02-20',
          status: '待发货',
          model: 'H1',
          brand: 'KEMET',
          number: '100',
          batch: '1',
          package: 'XXXW95',
          currecy: '人民币',
          price: "10.00",
          money: '1000',
          address: '国内',
          MPQ: '1',
          packing: '散装',
          order: 'DD22020000295-006',
          desc: ''
        },
        {
          deliveryDate: '2023-02-20',
          status: '待发货',
          model: 'H1',
          brand: 'KEMET',
          number: '100',
          batch: '1',
          package: 'XXXW95',
          currecy: '人民币',
          price: "10.00",
          money: '1000',
          address: '国内',
          MPQ: '1',
          packing: '散装',
          order: 'DD22020000295-006',
          desc: ''
        },
        {
          deliveryDate: '2023-02-20',
          status: '待发货',
          model: 'H1',
          brand: 'KEMET',
          number: '100',
          batch: '1',
          package: 'XXXW95',
          currecy: '人民币',
          price: "10.00",
          money: '1000',
          address: '国内',
          MPQ: '1',
          packing: '散装',
          order: 'DD22020000295-006',
          desc: ''
        },
        {
          deliveryDate: '2023-02-20',
          status: '待发货',
          model: 'H1',
          brand: 'KEMET',
          number: '100',
          batch: '1',
          package: 'XXXW95',
          currecy: '人民币',
          price: "10.00",
          money: '1000',
          address: '国内',
          MPQ: '1',
          packing: '散装',
          order: 'DD22020000295-006',
          desc: ''
        },
      ],
      multipleSelection: []
    }
  },
  components: {
    // customTable
    dateDrawer,
    numberDrawer
  },
  methods: {
    closeDrawer() {
      this.drawer = false;
      this.status = false;
      this.$refs.multipleTable.clearSelection();
    },
    closeNumDrawer() {
      this.numDrawer = false;
      this.status = false;
      this.$refs.multipleTable.clearSelection();
    },
    handleClose() {
      this.dialogVisibleCancel = false;
      this.$refs.multipleTable.clearSelection();
    },
    //变更交期
    changeDate() {
      if (this.multipleSelection.length > 0) {
        this.drawer = true;
      } else {
        this.$message.error('请选择数据进行操作');
      }

    },
    //变更数量
    changeNum() {
      if (this.multipleSelection.length > 0) {
        this.numDrawer = true;
      } else {
        this.$message.error('请选择数据进行操作');
      }
    },
    //取消
    cancel() {
      if (this.multipleSelection.length > 0) {
        this.dialogVisibleCancel = true;
      } else {
        this.$message.error('请选择数据进行操作');
      }
    },
    closeDialog() {
      this.dialogVisibleCancel = false;
      this.$refs.multipleTable.clearSelection();
    },
    //选中表格
    handleSelectionChange(val) {
      console.log('val', val)
      if (val.length > 0) {
        this.status = true;
        this.multipleSelection = val
      } else {
        this.status = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.to-be-shipped {
  .btn {
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .dialog-main {
    border: 1px solid #eee;
    border-radius: 7px 7px;
    padding: 12px 20px;
    margin: 10px;

  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}</style>